<template>
  <div class="app">
    <div class="opp">
      <div class="top">
        <p class="city">武汉</p>
        <div class="input">
          <p class="input-text" @click="$router.push('/musicSearch')">Thread-Goldmund</p>
        </div>
      </div>
      <div class="block">
        <el-carousel trigger="click" height="4rem">
          <el-carousel-item v-for="item in banner" :key="item.index">
            <img :src="item.imageUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 热门歌曲 -->
      <div>
        <More>
          <span slot="icon"><i class="iconfont icon-remen"></i> 热门歌曲</span>
          <span slot="more" @click="handleMore(arr[0])">更多</span>
        </More>
        <div class="content">
          <Item
            v-for="item of highquality.slice(0, 3)"
            :item="item"
            :key="item.id"
          >
          </Item>
        </div>
      </div>
      <!-- 最新歌曲 -->
      <div>
        <More>
          <span slot="icon"
            ><i class="iconfont icon-guangdie"></i>最新歌曲</span
          >
          <span slot="more" @click="handleMore(arr[1])">更多</span>
        </More>
        <div class="content">
          <Item v-for="item of newest.slice(0, 3)" :item="item" :key="item.id">
          </Item>
        </div>
      </div>
      <!-- DJ歌曲 -->
      <div style="padding-bottom: 50px">
        <More>
          <span slot="icon"><i class="iconfont icon-guangbo"></i>DJ歌曲</span>
          <span slot="more" @click="handleMore(arr[2])">更多</span>
        </More>
        <div class="content">
          <Item
            v-for="item of djprogram.slice(0, 3)"
            :item="item"
            :key="item.id"
          >
          </Item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import More from "./components/more.vue";
import Item from "./components/music.vue";
export default {
  data() {
    return {
      banner: [],
      highquality: [],
      newest: [],
      djprogram: [],
      arr: ["hot", "new", "dj"],
    };
  },

  components: { More, Item },
  mounted() {
    this.$http("http://47.108.197.28:3000/banner").then((res) => {
      this.banner = res.data.banners;
    });
    this.$http("http://47.108.197.28:3000/album/newest").then((res) => {
      res.data.albums.forEach((item) => {
        item.coverImgUrl = item.blurPicUrl;
      });
      this.newest = res.data.albums;
    });
    this.$http("http://47.108.197.28:3000/top/playlist/highquality").then(
      (res) => {
        this.highquality = res.data.playlists;
      }
    );
    this.$http("http://47.108.197.28:3000/personalized/djprogram ").then(
      (res) => {
        res.data.result.forEach((item) => {
          item.coverImgUrl = item.picUrl;
        });
        this.djprogram = res.data.result;
      }
    );
  },
  methods: {
    handleMore(e) {
      this.$router.push(`/musicMore/${e}`);
    },
  },
};
</script>

<style scoped>
.app {
  width: 10rem;
  margin: auto;
}
.opp {
  box-sizing: border-box;
  width: 10rem;
  margin: auto;
}
.top {
  display: flex;
  padding: 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;
}
.city {
  line-height: 0.6667rem;
  font-size: 0.4rem;
  font-weight: 600;
  cursor: pointer;
}
.input {
  position: relative;
  width: 5.3333rem;
  cursor: pointer;
  height: 0.6667rem;
  border: 1px solid #b0b0b0;
  padding-left: 0.2667rem;
}
i {
  color: red;
  font-size: 30px;
}
.input-text {
  color: #b0b0b0;
  position: absolute;
  line-height: 50px;
}

.block img {
  width: 100%;
}
.content {
  width: 750px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>